import React, { useEffect, useCallback } from 'react';
import { useHistory } from 'react-router-dom';
import { connect } from 'react-redux';
import { message } from 'antd';

import AddPromotionPosition from './partials/add/AddPromotionPosition';

import * as Api from 'api/api';
import * as Action from 'store/promotion-position-list/action';
import * as css from './css/promotion-position-list';

function PromotionPositionList(props) {
  const { promotionPositionList, addPromotionPosition, action } = props;
  const {
    page,
    totalNum,
    name,
    list,
    loading,
    showAdd
  } = promotionPositionList;

  let history = useHistory();

  const fetchList = useCallback(
    name => {
      action.fetchList({
        pageSize: page.size,
        pageNum: page.num,
        name
      });
    },
    [action, page.num, page.size]
  );

  useEffect(() => {
    fetchList();
  }, [fetchList]);

  function onPageChange(page) {
    action.setPageNum(page);
  }

  function onNameChange(e) {
    action.setName(e.currentTarget.value);
  }

  function onSearch() {
    fetchList(name);
  }

  function indexColumn(text, record, index) {
    let num = index + 1 + (page.num - 1) * page.size;
    return num;
  }

  function viewOrderColumn(text, record, index) {
    const toOrder = () => {
      history.push(`/order/list?promotionPositionId=${record.id}`);
    };
    return <css.ViewOrderText onClick={toOrder}>查看订单</css.ViewOrderText>;
  }

  function onOpenAdd() {
    action.setShowAdd(true);
  }

  function onCloseAdd() {
    action.setShowAdd(false);
  }

  async function onAddPromotionPosition() {
    const res = await Api.addPromotionPosition({
      name: addPromotionPosition.name.replace(/\s+/g, '')
    });

    if (res.status === 200) {
      message.success('添加成功');
      onCloseAdd();
      fetchList();
    }
  }

  return (
    <css.PromotionPositionList>
      {/* search */}
      <css.Search>
        <css.SearchLabel>推广位名称</css.SearchLabel>
        <css.SearchInput value={name} onChange={onNameChange} allowClear />
        <css.SearchButton type='primary' onClick={onSearch}>
          搜索
        </css.SearchButton>
      </css.Search>
      {/* table */}
      <css.Table
        dataSource={list}
        bordered
        pagination={false}
        loading={loading}
      >
        <css.Column
          key='index'
          title='#'
          render={indexColumn}
          align='center'
          width={50}
        />
        <css.Column
          key='pidName'
          title='推广为名称'
          dataIndex='pidName'
          align='center'
        />
        <css.Column key='pid' title='推广为id' dataIndex='pid' align='center' />
        <css.Column
          key='view-order'
          title='订单'
          width={200}
          render={viewOrderColumn}
          align='center'
        />
      </css.Table>
      {/* pagnation */}
      <css.Pagination
        current={page.num}
        pageSize={page.size}
        total={totalNum}
        onChange={onPageChange}
      />
      {/* button block */}
      <css.ButtonBlock>
        <css.CreateButton type='primary' onClick={onOpenAdd}>
          创建推广位
        </css.CreateButton>
      </css.ButtonBlock>
      {/* add */}
      <css.AddModel
        title='添加推广位'
        visible={showAdd}
        okText='添加'
        cancelText='取消'
        onOk={onAddPromotionPosition}
        onCancel={onCloseAdd}
        closable={false}
        destroyOnClose
        keyboard={false}
        maskClosable={false}
      >
        <AddPromotionPosition></AddPromotionPosition>
      </css.AddModel>
    </css.PromotionPositionList>
  );
}

export default connect(
  state => {
    const { promotionPositionList, addPromotionPosition } = state;

    return {
      promotionPositionList,
      addPromotionPosition
    };
  },
  f => ({
    action: {
      setPageSize() {
        f(Action.setPageSize(...arguments));
      },
      setPageNum() {
        f(Action.setPageNum(...arguments));
      },
      fetchList() {
        f(Action.fetchList(...arguments));
      },
      setName() {
        f(Action.setName(...arguments));
      },
      setShowAdd() {
        f(Action.setShowAdd(...arguments));
      }
    }
  })
)(PromotionPositionList);
